<template>
  <div id="big">
    <pull-to :top-load-method="refresh" :bottom-load-method="refresha">
      <div class="box">

        <div v-if="arr===false||arr==''">
          <li class="list_wu">
              <img src="../img/back.png" alt="">
          </li>
        </div>
        <div v-else>
          <div class="list" v-for="(item,index) in this.arr" :key="index">
              <div class="top">
                <img :src="item.userCInfo.avatar_head" class="list_img">
                <div class="right">
                  <span class="list_name">{{item.userCInfo.nickname}}</span>
                  <!-- <span class="list_wz">与销售“小红”交换线索所得</span> -->
                  <span class="list_time">{{time(item.addtime)}}</span>
                  <!-- <div class="list_btn">沟通</div> -->
                  <div class="list_box">
                      <div v-for="x in item.service_array">
                          <div class="server">{{x.service_name}}</div>
                      </div>
                  </div>
                  <div class="list_linea"></div>
                  <div class="list_lineb"></div>
                </div>
              </div>
              <div class="btm">
                <div class="btn_box">
                  <a class="btn_a" :href="'yqlh://adv_user_id='+item.user_id+'&state=4'">在线沟通</a>
                  <button class="btn_b" disabled="disabled">已拒绝</button>
                </div>
              </div>
          </div>
        </div>


      </div>
    </pull-to>
  </div>
</template>
<script>
import axios from 'axios'
import PullTo from 'vue-pull-to'
export default {
  name: 'example',
  components: {
    PullTo
  },
  data(){
      return{
        page:1,
        arr:{ },
        token:this.GLOBAL.serverSrc
      }
  },
  created(){
        this.getData()
  },
  methods: {
    time(nows){
       var now = new Date(nows*1000);
       var year = now.getFullYear();
       var month = now.getMonth() + 1;
       var date = now.getDate();
       return year + "-" + month + "-" + date;
    },
    getData(){
      var url=this.token+'/user/applyservice';
      var obj={
        user_id:this.$route.query.userid,
        state:2
      }
     var thet=this;
      this.$axios.post(url,obj).then(response=>{
          thet.arr=response.data.data
          //console.log(thet.arr)
      })
      .catch(function(error) {
          console.log(error);
      });
    },
    refresh(loaded) {
      setTimeout(() => {
        this.getData();
      //  this.dataList.reverse();
        loaded('done');
      }, 200);
    },
    refresha(loaded){
      setTimeout(() => {

        this.page++;
        var url=this.token+'/user/applyservice'+this.page;
        // alert(url);

        var obj={
          user_id:this.$route.query.userid,
          state:2
        }
        var thet=this;
        this.$axios.post(url,obj).then(response=>{
          response.data.data.forEach((item, index) => {
              thet.arr.push(item)
          })
        })
        .catch(function(error) {
            console.log(error);
        });
        loaded('done');
      }, 200);
    }
  }
}
</script>
<style lang="scss" scoped>
.box{
  overflow-x: hidden;
}
img{pointer-events: none;vertical-align: sub; }
#big{
  width:100%;
  height:100%;
  overflow-x: hidden;
  overflow-y: scroll;
  display:flex;
  justify-content: center;
  flex-wrap: wrap;
}
.list{
  width:3.55rem;
  background:#FFFFFF;
  border-radius:0.05rem;
  margin-top:0.1rem;
  position:relative;
  display:flex;
  flex-wrap:wrap;
  .top{
    width:100%;
    display:flex;
    justify-content: flex-end;
    .list_img{
       width:0.59rem;
       height:0.59rem;
       border-radius:0.05rem;
       position:absolute;
       top:0.1rem;
       left:0.12rem;
     }
     .right{
       width:2.7rem;
       display:flex;
       flex-wrap:wrap;
       position:relative;
       .list_time{
         color:#939393;
         font-size:0.1rem;
         position: absolute;
         top:0.14rem;
         left:2rem;
       }
       .list_name{
           display:inline-block;
           width:100%;
           color:#1B1B1B;
           font-size:0.15rem;
           font-weight:bold;
           margin-top:0.14rem;
       }
       .list_box{
           width:2.6rem;
           display:flex;
           flex-wrap:wrap;
           margin-top:0.13rem;
           div{
             display:flex;
             flex-wrap:wrap;
             .server{
               padding:0 0.03rem 0 0.03rem;
               height:0.15rem;
               line-height:0.17rem;
               color:#46DCC3;
               font-size:0.1rem;
               background:rgb(227,250,246);
               margin-right:0.1rem;
               margin-bottom:0.06rem;
             }
           }
        }
     }
  }
  .btm{
    width:100%;
    display:flex;
    justify-content:center;
    margin-top:0.3rem;
    .btn_box{
      width:3.32rem;
      height:0.32rem;
      border-top:0.01rem solid #EEEEEE;
      display:flex;
      align-items:center;
      .btn_a{
          width:1.65rem;
          height:0.26rem;
          background:#FFFFFF;
          border:none;
          outline:none;
          color:#939393;
          font-size:0.14rem;
          text-decoration:none;
          display:flex;
          justify-content: center;
          align-items: center;
          border-right:0.01rem solid #EEEEEE;
        }
        .btn_b{
          width:1.65rem;
          height:0.26rem;
          background:#FFFFFF;
          border:none;
          outline:none;
          color:#46DCC3;
          font-size:0.14rem;
          text-decoration:none;
          display:flex;
          justify-content: center;
          align-items: center;
        }
    }
  }
}
.box:nth-last-of-type(1){
  margin-bottom: 1.1rem;
}
.list_wu{
  width:100%;
  height:100%;
  display:flex;
  justify-content:center;
  img{
    width:2rem;
    height:0.9rem;
    margin-top:48%;
  }
}
</style>
